<template>
  <div class="distributorSide-authorization-service-authorization-details">
    <m-header title="授权信息">
      <template #icon>
        <m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_guanlzcz"
          color="#4d84ff"
        ></m-iconfont>
      </template>
    </m-header>
    <!-- 结算信息 -->
    <div class="invoice-info">
      <div class="invoice-info__main">
        <m-info-card :data="settlement_info.data"></m-info-card>
      </div>
    </div>
    <m-header title="明细信息">
      <template #icon>
        <m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_jiesxx"
          color="#4d84ff"
        ></m-iconfont>
      </template>
    </m-header>
    <!-- 患者信息 -->
    <div class="patient-info">
      <m-search
        ref="SearchForm"
        label-width="66px"
        :data="SEARCH_DETAILS"
        @searchForm="onSearch"
        @resetForm="onReset"
      />
      <div class="header-botton">
        <el-button type="primary" @click="exportExcelButton"
          ><m-iconfont
            classify="m-pc-public"
            icon="m-pc-public_daocsj"
            size="14"
          /><span>导出数据</span></el-button
        >
      </div>
      <m-editable
        v-loading="product_info.table.loading"
        class="product-info"
        :data="product_info.table.list"
        :columns="product_info.table.columns"
        height="500"
      />
      <el-pagination
        v-if="product_info.table.list.length > 0"
        ref="productInfoPaginationItem"
        class="product-info__pagination"
        align="right"
        :current-page="product_info.page.curPage"
        :page-sizes="product_info.page.sizes"
        :page-size="product_info.page.size"
        :layout="product_info.page.layout"
        :total="product_info.page.total"
        :empty-type="product_info.page.empty_type"
        @size-change="onProductInfoPageSizeChange"
        @current-change="onProductInfoPageCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import {
  serviceImpowerPageListgetById,
  serviceImpowerDetaileList,
  serviceImpowerDetaileListExport,
} from '@api/guoke_deepexi_interface_center_v1';
import { formatDate } from '@const/filter';
import { $loadFileSimply } from '@const/loadFileOps'; // 下载文件的方法
import { fileDownload } from '@const/utils';
import * as CONSTS from './const';

export default {
  name: 'ServiceAuthority',
  data() {
    return {
      ...CONSTS,
      // 结算信息
      settlement_info: {
        data: {
          labelWidth: '140px',
          valueWidth: '190px',
          content: CONSTS.SETTLE_LABEL_INFO,
        },
        loading: false,
        headerId: '',
      },
      // 患者信息
      product_info: {
        searchData: {},
        table: {
          list: [],
          columns: CONSTS.PRODUCT_INFO_TABLE_COLUMNS,
          loading: false,
        },
        page: {
          curPage: 1,
          size: PAGE_NUMBER[0],
          total: 0,
          sizes: PAGE_NUMBER,
          layout: PAGINATION_LAYOUT,
          empty_type: 0,
        },
      },
      exportLoading: false,
    };
  },
  computed: {},
  created() {
    this.getSettlement_infoList();
  },
  methods: {
    // 获取数据-结算信息
    getSettlement_infoList() {
      this.settlement_info.loading = true;
      this.$axios({
        url: serviceImpowerPageListgetById,
        method: 'post',
        data: { id: this.$route.query.id },
      })
        .then((res) => {
          this.settlement_info.headerId = res.data.payload.headerId;
          this.settlement_info.data.content = this.rematchBaseInfoData(
            res.data.payload || {}
          );
          this.getDataList();
        })
        .finally(() => {
          this.settlement_info.loading = false;
        });
    },
    rematchBaseInfoData(result) {
      return this.settlement_info.data.content.map((item) => ({
        ...item,
        value: item.trans ? item.trans[result[item.key]] : result[item.key],
      }));
    },
    // 获取数据--患者信息
    getDataList() {
      this.product_info.table.loading = true;
      this.$axios({
        url: serviceImpowerDetaileList,
        method: 'post',
        data: {
          page: this.product_info.page.curPage,
          pageSize: this.product_info.page.size,
          headerId: this.settlement_info.headerId,
          ...this.product_info.searchData,
        },
      })
        .then((res) => {
          this.product_info.table.list = res.data.payload.content || [];
          this.product_info.page.total = res.data.payload.totalElements;
        })
        .finally(() => {
          this.product_info.table.loading = false;
        });
    },
    // 导出
    exportExcelButton() {
      this.exportLoading = true;
      const timeStr = formatDate(new Date(), 'YYYYMMDD-HH:mm:ss');
      const filename = `查询导出${timeStr}.xls`;
      const data = {
        page: this.product_info.page.curPage,
        pageSize: this.product_info.page.size,
        headerId: this.settlement_info.headerId,
        ...this.product_info.searchData,
      };
      const reqData = {
        url: serviceImpowerDetaileListExport,
        data,
        method: 'post',
        timeout: 300000,
      };
      $loadFileSimply(reqData)
        .then((res) => {
          // 文件流
          fileDownload(res, filename);
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    // 搜索
    onSearch(condition) {
      this.product_info.page.curPage = 1;
      this.product_info.searchData = condition;
      this.getDataList();
    },
    // 重置
    onReset(condition) {
      this.product_info.page.curPage = 1;
      this.product_info.searchData = condition;
      this.getDataList();
    },
    // 点击分页事件
    onProductInfoPageSizeChange(sizeNum) {
      this.product_info.page.size = sizeNum;
      this.getDataList();
    },
    // 填写分页跳转时间
    onProductInfoPageCurrentChange(curPage) {
      this.product_info.page.curPage = curPage;
      this.getDataList();
    },
  },
};
</script>
<style lang="less">
.distributorSide-authorization-service-authorization-details {
  overflow: auto;
  display: flex;
  flex-direction: column;
  .invoice-info {
    display: flex;
    .invoice-info__main {
      margin-right: 20px;
    }
    .invoice-info__status {
      width: 140px;
      float: right;
      padding-top: 20px;
      padding-right: 20px;
      .invoice-info__status-item {
        width: 140px;
        height: 84px;
        img {
          width: 140px;
          height: auto;
        }
      }
    }
  }
  .patient-info {
    // margin-top: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .header-botton {
      padding: 0 0 10px 0px;
      display: flex;
      justify-content: flex-end;
    }
    .product-info {
      flex: 1;
    }
    .product-info__pagination {
      padding: 10px 20px;
      border: 1px solid @cutOffRuleColor;
      border-top: none;
      border-radius: 0 0 3px 3px;
    }
  }
}
</style>
